import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Grid } from '@material-ui/core';
import { Section, SectionAlternate } from 'components/organisms';
import ReactHtmlParser from 'react-html-parser';
import {
  FooterNewsletter,
  Hero,
} from './components';
import { useSelector } from 'react-redux'
import { Image } from 'components/atoms';
import YouTube from 'react-youtube';
import { Util } from 'utils/util';

const useStyles = makeStyles(theme => ({
  root: {
    height: '100%',
    width: '100%',
  },
  sidebarNewsletter: {
    marginTop: theme.spacing(4),
    [theme.breakpoints.down('sm')]: {
      marginTop: theme.spacing(2),
    },
  },
  footerNewsletterSection: {
    background: theme.palette.primary.dark,
  },
  videoIframe: {
    boxShadow: `0 5px 15px 0 ${theme.palette.cardShadow}`,
    borderRadius: theme.spacing(1),
    [theme.breakpoints.down('sm')]: {
      boxShadow: 'none',
    },
  },
  addMarginTop: {
    marginTop: '30px'
  }
}));

const PublicationDetail = props => {
  const classes = useStyles();
  const productionData = useSelector((state) => state.publication.productionData)

  const opts = {
    height: '390',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1,
    },
  };

  return (
    <div className={classes.root}>
      <Hero
        cover={{ src: productionData.thumbnail }}
        title={productionData.title}
        subtitle=""
        author={{ name: productionData.author, photo: { src: productionData.photo } }}
      />
      <Section>
        <Typography variant="body1" color="textSecondary">
          {ReactHtmlParser(productionData.content)}
        </Typography>
        { productionData.media_type == "image" ? (
          <Grid item xs={12} md={8} className={classes.addMarginTop}>
          <Image
            {...{ src: productionData.thumbnail }}
            className={classes.image}
            lazyProps={{ width: '100%', height: '100%' }}
          />
          </Grid>
        ) : (
          (productionData.media_type == "youtube" && productionData.youtube_link) &&
          (<Grid item xs={12} md={6} data-aos={'fade-up'} className={classes.addMarginTop}>
            <YouTube videoId={Util.YouTubeGetID(productionData.youtube_link)} opts={opts} />
          </Grid>)
        ) }
      </Section>


      <SectionAlternate className={classes.footerNewsletterSection}>
        <FooterNewsletter />
      </SectionAlternate>
    </div>
  );
};

export default PublicationDetail;
